<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>
</head>
<body>

    <div id="app">
        <ele></ele>
    </div>

    <script src="./utils/vue.min.js"></script>

    <script>
        
        Vue.component('ele',{
            render: function (createElement) {
                
                var _this = this;
                var inputNode =  createElement('input',{
                        attrs:{
                            placeholder: '输入内容，按回车键发送'
                        },
                        style:{
                            width: '200px'
                        },
                        on:{
                             keyup: function (event) {
                                if(event.keyCode !== 13)
                                    return;
                                _this.list.push(event.target.value);
                                event.target.value = '';
                             }
                         }
                });

                if(this.list.length){
                    var listNodes = this.list.map((item) => { return createElement('li',item);});
                    return createElement('div',[
                        createElement('ul',listNodes),
                        inputNode
                    ]);
                }else{
                    return createElement('div',[createElement('p','没有内容可以显示！'),
                        inputNode
                    ]);
                }
            },
            data: function () {
                return {
                    list: []
                };
            }
        });
        
        var app = new Vue({
            el: '#app'
        });
    </script>

</body>
</html>